
<template>
  <div>
    <p>
      姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{
        user.info.age
      }}
    </p>
  </div>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
const user = reactive({
  name: "wc",
  info: {
    gender: "男",
    age: 18,
  },
});

setTimeout(() => {
  user.name = "xq";
}, 2000);
setTimeout(() => {
  user.info.age = 30;
}, 4000);

// 监听一个响应式对象中的某个属性（引用类型），配合深度监听
// watch(()=>数据, 改变后回调函数)
// watch(()=>数据, 改变后回调函数, {deep: true})
watch(
  () => user.info,
  () => {
    console.log("数据变化了~");
    // todo...
  },
  {
    deep: true,
    // 配置默认执行
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
</style>


